<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>beauty makeup Theme</title>
    <!-- load stylesheets -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400">   <!-- Google web font "Open Sans", https://fonts.google.com/ -->
    <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">           <!-- Font Awesome, http://fontawesome.io/ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">                                 <!-- Bootstrap style, http://v4-alpha.getbootstrap.com/ -->
    <link rel="stylesheet" href="css/magnific-popup.css">                                <!-- Magnific pop up style, http://dimsemenov.com/plugins/magnific-popup/ -->
    <link rel="stylesheet" href="css/templatemo-style.css">                              <!-- Templatemo style -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
      </head>

      <body>
        <div class="container-fluid">

            <section id="welcome" class="tm-content-box tm-banner margin-b-10">
                <div class="tm-banner-inner">
                    <h1 class="tm-banner-title">PERFECT DIARY</h1>                        
                </div>                    
            </section>

            <div class="tm-body">
                <div class="tm-sidebar">
                    <nav class="tm-main-nav">
                        <ul class="tm-main-nav-ul">
                            <li class="tm-nav-item"><a href="#welcome" class="tm-nav-item-link tm-button">
                                <i class="fa fa-smile-o tm-nav-fa"></i>Welcome</a>
                            </li>
                            <li class="tm-nav-item"><a href="#gallery" class="tm-nav-item-link tm-button">
                                <i class="fa fa-image tm-nav-fa"></i>Image Gallery</a>
                            </li>
                            <li class="tm-nav-item"><a href="#services" class="tm-nav-item-link tm-button">
                                <i class="fa fa-tasks tm-nav-fa"></i>Introduce</a>
                            </li>
                            <li class="tm-nav-item"><a href="#about" class="tm-nav-item-link tm-button">
                                <i class="fa fa-sitemap tm-nav-fa"></i>About Company</a>
                            </li>
                            <li class="tm-nav-item"><a href="#contact" class="tm-nav-item-link tm-button">
                                <i class="fa fa-envelope-o tm-nav-fa"></i>Contact Us</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                
                <div class="tm-main-content">
                    
                    <div class="tm-content-box tm-content-box-home">                        
                        <img src="img/20190510190047.jpg" alt="Image 1" class="img-fluid tm-welcome-img">                        
                        <div class="tm-welcome-boxes-container">
                            <div class="tm-welcome-box">
                                <div class="tm-welcome-text">
                                    <h2 class="tm-section-title">Joint inspiration</h2>
                                    <p>我们天生爱玩，化身探险家，将触角伸向热爱探索的DISCOVERY，近赏野生动物捕猎瞬间的眼神杀.</p>    
                                </div>                            
                                <a href="#" class="tm-welcome-link tm-button">Learn More</a>
                            </div>
                            <div class="tm-welcome-box">
                                <div class="tm-welcome-text">
                                    <h2 class="tm-section-title">Into the fashion week</h2>
                                    <p>Perfect Diary 与米兰时装周，巴黎时装周，上海时装周等密切合作，打造流行妆容.</p>    
                                </div>                            
                                <a href="#" class="tm-welcome-link tm-button">Read Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >企业网站模板</a></div>
                        
                    <div id="gallery" class="tm-content-box">                        
                        <div class="grid tm-gallery">
                            <figure class="effect-bubba">
                                <img src="img/20190510194615.jpg" alt="Image 8" class="img-fluid">
                                <figcaption>
                                    <h2>斑虎 <span>Brindle</span></h2>
                                    <p>跃出丛林发起致命锁喉，只需一眼早已攻陷</p>
                                    <a href="img/20190510194615.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="img/20190510194928.jpg" alt="Image 7" class="img-fluid">
                                <figcaption>
                                    <h2>Explorer <span> </span></h2>
                                    <p>十二色眼影盘</p>
                                    <a href="img/20190510194928.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="img/20190510194624.jpg" alt="Image 5" class="img-fluid">
                                <figcaption>
                                    <h2>小猪 <span>　Piglet　</span></h2>
                                    <p>穿花扑蝶软萌出击，愉悦探索未知世界</p>
                                    <a href="img/20190510194624.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="img/20190510194633.jpg" alt="Image 3" class="img-fluid">
                                <figcaption>
                                    <h2>冰狼 <span>wolverene</span></h2>
                                    <p>朦胧月夜独行觅食，犀利双眸闪烁无畏光芒</p>
                                    <a href="img/20190510194633.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="img/20190510194939.jpg" alt="Image 2" class="img-fluid">
                                <figcaption>
                                    <h2>Discovery <span> </span></h2>
                                    <p>我们天生爱玩，化身探险家</p>
                                    <a href="img/20190510194939.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="img/20190510194642.jpg" alt="Image 4" class="img-fluid">
                                <figcaption>
                                    <h2>鳄鱼 <span>Crocodile</span></h2>
                                    <p>低调潜行，迷踪隐匿，如沼泽之地诱人深陷</p>
                                    <a href="img/20190510194642.jpg">View more</a>
                                </figcaption>
                            </figure>                                
                        </div>
                    </div>

                    <div id="services" class="tm-content-box tm-gray-bg tm-services">

                        <div class="tm-services-img-container">
                            <img src="img/20190510212912.jpg" alt="Green Field" class="img-fluid tm-services-img">    
                        </div> 
                            
                        <div class="tm-box-pad tm-services-description-container">
                            <h2 class="tm-section-title">Perfect Diary　 x　　　　　The British Museum</h2>
                            <p class="tm-section-description">Founded in 1753,the British museum is the first national public museum in the world,spanning more than two million years from the dawn of human history to the present.</p>
                        <p class="tm-section-description">The Mayorica pottery tray is a classic collection of the British Museum. It advocates the spirit of "breaking the bondage, everyone can enjoy and express beauty", fits the brand concept of perfect diary "beauty is not limited", and joins hands to break through the inherent label, the art Vintage and fashion make-up.</p> 
                            
                        </div>                                              
                        
                    </div>

                    <!-- slider -->
                    <div id="about" class="tm-content-box">
                        <div class="tm-box-pad tm-bordered-box">
                            <h2 class="tm-section-title">BRAND STORY</h2>
                            <p>完美日记成立于2016年，研发一系列"易上手,高品质，精设计"的时尚彩妆产品，为新一代中国年轻女性提供快时尚彩妆产品和美丽方案，打造有国际影响力的CHINA BEAUTY ICON.</p>
                            <a href="#" class="tm-button tm-button-normal">Read More</a>
                        </div>
                        <div class="tm-flex">
                            <div class="tm-purple-bg tm-box-pad tm-bordered-box tm-no-border-top">
                                <h2 class="tm-section-title">BRAND CONCEPT</h2>
                                <p>UNLIMITED BEAUTY,美不设限，倡导年轻一代不被外界标签束缚，而是努力地突破自我，积极地探索人生更多可能性，遇见更优秀的自己.</p>
                            </div>
                            <div class="tm-gray-bg tm-box-pad tm-bordered-box tm-no-border-top">
                                <h2 class="tm-section-title">BRAND HONOR</h2>
                                <p>Perfect Diary荣获多项美妆大奖，瑞丽"人气断货王睫毛膏"，瑞丽"年度畅销王牌粉底液"，ELLE"年度新晋品牌奖"，芭莎"年度最佳眼影".</p>
                            </div>    
                        </div>                        
                    </div>

                    <section id="contact" class="tm-content-box">

                        <div class="tm-flex">
                            <div class="tm-contact-left-half tm-gray-bg">
                                <div class="tm-contact-inner-pad">
                                    <h2 class="tm-section-title">Contact Us</h2>
                                    <form action="#contact" method="post" class="contact-form">

                                        <div class="form-group">
                                            <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name"  required/>
                                        </div>
                                        <div class="form-group">
                                            <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Email"  required/>
                                        </div>
                                        <div class="form-group">
                                            <textarea id="contact_message" name="contact_message" class="form-control" rows="9" placeholder="Message" required></textarea>
                                        </div>
                                        
                                        <button type="submit" class="btn btn-primary pull-xs-right tm-button tm-button-normal">Submit</button>

                                    </form>
                                </div>                                
                            </div>

                            <div class="tm-contact-right-half tm-purple-bg">
                                <div class="tm-address-box">
                                    <h2 class="tm-section-title">Our Location</h2>
                                    <address>406 hua sui road,<br>
                                             tianhe district,<br>
                                             guangzhou
                                    </address>    
                                </div>                                
                                <div id="">map</div>
                            </div>
                        </div>
                        
                    </section>  

                    <footer class="tm-footer">
                        <p class="text-xs-center">Copyright &copy; 2016 Your Company | More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
                    </footer>

                </div>
            </div>             
        </div>
        
        <!-- load JS files -->
        
        <script src="js/jquery-1.11.3.min.js"></script>             <!-- jQuery (https://jquery.com/download/) -->
        <script src="js/tether.min.js"></script> <!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
        <script src="js/jquery.magnific-popup.min.js"></script>     <!-- Magnific pop-up (http://dimsemenov.com/plugins/magnific-popup/) -->
        <script src="js/jquery.singlePageNav.min.js"></script>      <!-- Single Page Nav (https://github.com/ChrisWojcik/single-page-nav) -->
        
        <!-- Templatemo scripts -->
        <script>  

        

        function setNavbar() {
            if ($(document).scrollTop() > 160) {
                $('.tm-sidebar').addClass('sticky');
            } else {
                $('.tm-sidebar').removeClass('sticky');
            }
        }                   
    
        $(document).ready(function(){
            
            // Single page nav
            $('.tm-main-nav').singlePageNav({
                'currentClass' : "active",
                offset : 20
            });

            // Detect window scroll and change navbar
            setNavbar();
            
            $(window).scroll(function() {
              setNavbar();
            });

            // Magnific pop up
            $('.tm-gallery').magnificPopup({
              delegate: 'a', // child items selector, by clicking on it popup will open
              type: 'image',
              gallery: {enabled:true}
              // other options
            });
         
        });
    
        </script>             

    </body>
    </html>